<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
// const ispass = ref(true)
const studentid = store.state.userStore.userInfo.data.data.studentId
const user = ref({

})
const ruleForm2 = ref(null)

const rules = reactive({
  pass: [{
    required: true, message: '用户名不能为空', trigger: 'blur'
  }],
  checkPass: [{
    required: true, message: '用户名不能为空', trigger: 'blur'
  }]
})

const submitForm = () => {
  ruleForm2.value.validate((valid) => {
    console.log(user.value)
    if (valid) {
      axios.put('api/studentcontroller/updatePwd', {
        pwd: user.value.pass,
        studentid
      }).then(res => {
        ElMessage('修改成功')
      })
    }
  })
}
</script>

<template>
<div class="manager">
  <el-form :model="user" status-icon :rules="rules" ref="ruleForm2" label-width="100px"  class="demo-ruleForm">
  <h3 class="alter">修改你的密码</h3>
  <el-form-item label="密码" prop="pass" class="pass">
    <el-input type="password" v-model="user.pass" autocomplete="off"></el-input>
  </el-form-item>
   <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="user.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <!-- <el-button @click="resetForm('ruleForm2')">重置</el-button> -->
      </el-form-item>
  </el-form>
</div>
</template>

<style scoped>
#manager .pass  label{
  color: red;
  font-size: 20px;
}
#manager {
  width: 600px;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
  margin-bottom: 300px;
}
#manager .alter {
  margin: 30px 0px;
}
</style>
